<template>
    <div id="vue-edit-project-form">
        <div class="card">
            <div class="card-header">
                <h2> {{ title }} <small>{{project.desc || emptyDescription}}</small></h2>
                <!-- Action menu -->
                <ul class="actions">
                    <li class="dropdown action-show">
                        <a href="" data-toggle="dropdown" aria-expanded="false">
                            <i class="zmdi zmdi-more-vert"></i>
                        </a>

                        <div class="dropdown-menu pull-right">
                            <p class="p-20">
                                You can put anything here
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        
            <form class="card-body card-padding">
                <div class="row">
                    <div class="col-sm-4 m-b-20" 
                        v-for="(fieldName, field) in fields" 
                        v-if="field.visiable"
                    >
                        <chosen v-if="field.type == 'chosen'"
                                :value.sync="project[fieldName]"
                                :config='field | chosenFieldConfig fieldName'
                                :disabled="disabledForm"
                        ></chosen>


                        <div v-else class="form-group fg-line" >
                            <label>{{fieldName | lang 'project.table'}}</label>
                            <input  type="text"
                                    value="{{project[fieldName]}}" 
                                    class="form-control" 
                                    data-mask="000.000.000-00" 
                                    placeholder="{{fieldName | lang 'project.table'}}"
                                    :disabled="disabledForm"

                            >
                        </div>
                    </div
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    import { projectForm } from '../../config/forms.cfg.js';



    import chosen from '../partial/chosen.vue';
    export default {
        props: ['project'],
        components: { chosen },
        data () {
            var fields = projectForm;
            return {
                fields
            }
        },
        filters: {
            chosenFieldConfig (field, fieldName){
                field.api = field.api+this.project.ID;
                field.label = field.placeHolder = Lang.get('project.table.'+fieldName);
                return field;
            }
        },
        computed: {
            title () {
                return Lang.get('project.form.header', {name:this.project.name})
            },
            disabledForm () {
                return false;
            },
            emptyDescription () {
                return Lang.get('project.form.noDescription');
            }
        }
    }
</script>